<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://www.w3school.com.cn/lib/bs/bootstrap.css" rel="stylesheet">
<!-- 最新编译的 JavaScript -->
<script src="https://www.w3school.com.cn/lib/bs/bootstrap.js"></script>
<script src="https://unpkg.com/scrollreveal@4/dist/scrollreveal.min.js"></script>


<link rel="stylesheet" href="css/kf.css">
</head>
<body>
      <!-- 林梦雅20软单20200508110 -->
    <div class="part1"><!-- 首页头部 -->
        <nav class="navbar navbar-expand-sm part1-tt">
            <div class="container-fluid">
              <a class="navbar-brand" href="ypjdsy.html"><img src="img/log.png" alt=""></a>
              <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
                <span class="navbar-toggler-icon"></span>
              </button>
              <div class="collapse navbar-collapse" id="collapsibleNavbar">
                <ul class="navbar-nav">
                  <li class="nav-item">
                    <a class="nav-link" href="ypjdsy.html" >首页</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="kf.html" >客房</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="yytime.html" >营运时间</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="cyjjn.html" >餐宴及佳酿</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="jcss.html" >精彩盛事</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="shopty.html" >购物体验</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="rhjx.html" >荣获奖项</a>
                  </li>


                  <li class="nav-item">
                    <a class="nav-link" href="chatus.html" style="font-weight: bolder;color: #266258;">联系我们</a>
                  </li>
                </ul>
              </div>
            </div>
          </nav>
    </div>
    <div class="part2-8">
        <div class="part8-z">
            <p class="part8-tt">联系我们</p>

            <p style="font-size: 35px;font-weight: lighter; color: #266258;">
              优品酒店（中国区）
              旗下酒店品牌覆盖多元市场,
              致力于为消费者提供高品质和多样化的出行体验。
            </p>
            <div class="part8-dataz">
                <div class="part8-data0">
                    <img src="img/data/1.png" alt="">
                    <div class="part8-tt">
                        <span style="font-size: 80px;" class="num8">15000</span>&nbsp; 家
                    </div>
                    <p>总规模</p>
                </div>

                <div class="part8-data0">
                    <img src="img/data/2.png" alt="">
                    <div class="part8-tt"> <span style="font-size: 80px;" class="num8">150万</span>&nbsp;间</div>
                    
                    <p>房量</p>
                </div>
                <div class="part8-data0">
                    <img src="img/data/3.png" alt="">
                    <div class="part8-tt"> <span style="font-size: 80px;" class="num8">470</span>&nbsp;个</div>
                   
                    <p>覆盖城市</p>
                </div>
                <div class="part8-data0">
                    <img src="img/data/4.png" alt="">
                    <div class="part8-tt"><span style="font-size: 80px;" class="num8">1.82亿</span>&nbsp;人</div>
                    
                    <p>会员数</p>
                </div>
                <script>
                    // 初始化 ScrollReveal.js
                    const sr = ScrollReveal();
                  
                    // 定义滚动效果选项
                    const options = {
                      delay: 500,
                      distance: '50px',
                      duration: 1000,
                      easing: 'ease',
                    };
                  
                    // 为每个数字元素添加滚动效果
                    const numbers = document.querySelectorAll('.num8');
                    numbers.forEach((num8) => {
                      sr.reveal(num8, options);
                    });
                  
                    // 监听滚动停止事件
                    window.addEventListener('scroll', () => {
                      if (!window.scrollY) {
                        numbers.forEach((num8) => {
                          num8.style.transform = 'translateY(0)';
                        });
                      }
                    });
                  </script>
                  
                  
            </div>
            <img src="img/联系/1.png" alt="" width="1650px" height="600px">
            <div class="jiudian8">
                <div class="jd-left8">
                    <div>
                        <i class="part3-tt">成为世界一流的酒店管理集团</i><br>
                        <i class="part3-tt">TO BE THE WORLD-CLASS HOTEL MANAGEMENT GROUP </i>
                        <br><br>
                        <img src="img/联系/dj.png" alt="" class="enlarge-img8">
                        <p>点击获取微信二维码</p>
                        <p>
                            Copyright © 2023 优品酒店 All Rights Reserved.沪ICP备xxxxx号</p>
                    </div>
                </div>
                <div class="jd-right8">
                    <p class="link8"><a href="#">投资加盟</a></p>
                    <p class="link8"><a href="ypjdsy.html">关于我们</a></p>
                    <p class="link8"><a href="kf.html">酒店预订</a></p>
                    <p class="link8"><a href="rhjx.html">荣获奖项</a></p>
                    <p class="link8"><a href="yytime.html">营运时间</a></p>
                </div>
                <div class="dialog-container8">
                    <!-- /* 设置对话框容器的样式 */ -->
                    <div class="dialog8">
                        <!-- 设置对话框内容的样式 -->
                      <img src="img/联系/wx.png" alt="" class="dialog-image8">
                      <!-- 设置对话框图片的样式 -->
                      <button class="close-button8">&times;</button>
                      <!-- 设置关闭按钮的样式 -->
                    </div>
                </div>
                  <script>
                    const enlargeImg = document.querySelector('.enlarge-img8');
                    const dialogContainer = document.querySelector('.dialog-container8');
                    const dialogImage = document.querySelector('.dialog-image8');
                    const closeButton = document.querySelector('.close-button8');

                    enlargeImg.addEventListener('click', () => {
                        // 设置对话框图片的路径为另一张图片
                    dialogImage.src = "img/联系/wx.png";
                    dialogContainer.style.display = 'block';
                    // 显示对话框
                    });
                        // 关闭对话框
                    closeButton.addEventListener('click', () => {
                    dialogContainer.style.display = 'none';
                    });


                  </script>
                
            </div>

            
        </div>  
    </div>

    <div class="part4z"><!-- 最后商标 -->

        <div class="part4z-tt">
            <img src="img/2log.png" alt="" style="width: 200px;">
            <p>优品致力成为全球最创新的综合度假酒店</p>
        </div>
    </div>
</body>
</html>